<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#content{width:100%;margin:auto;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#ctrlBar span{height:60px;line-height:70px;float:left;padding-right:15px;}
#ctrlBar span a{font-size:1.5rem;cursor:pointer;}
#ctrlBar span a.c{font-size:2rem;font-weight:600;line-height:64px;}
#comments{width:100%;max-width:800px;min-height:20px;float:left;background:none;text-align:left;padding-left:0;}
#comments .am-comments-list{width:100%;}
#comments .am-comment{width:100%;border:0;margin-bottom:5px;background:#fff;padding-left:20px;position:relative;}
.btnBar{width:100%;position:absolute;bottom:5px;right:12px;text-align:right;}
.btnBar a{color:#ccc;}
.btnBar a:hover{color:#111;}
</style>
<div id="main" class="am-cf">
<%= include ic/my_banner.html %>
<div id="mynav">
  <div class="nav" onclick="gotoUrl('/my/photostream')">Photostream</div>
  <div class="nav" onclick="gotoUrl('/my/album')">Ablums</div>
  <div class="nav" onclick="gotoUrl('/my/trip')">Trips</div>
  <div class="nav" onclick="gotoUrl('/my/favorite')">Favorites</div>
  <div class="nav c" onclick="gotoUrl('/my/comment')">Comments</div>
</div>
<div id="content">
  <div id="ctrlBar" class="am-cf">
    <span><a <% if(type=="made"){ %>class="c"<% } %> href="/my/comment?type=made">Made</a></span>
    <span><a <% if(type=="received"){ %>class="c"<% } %> href="/my/comment?type=received">Received</a></span>
  </div>
  <div id="comments" >
    <ul class="am-comments-list am-comments-list-flip">
      <% if(type=="received"){ %>
        <% for(var i=0;i<results.length;i++){ %>
        <li class="am-comment am-g">
          <div class="am-u-sm-12 am-u-md-1 am-padding-xs">
            <span class="am-fl"><img src="<% if(results[i].get('toUser') && results[i].get('toUser').get('avatar')){ %><%= results[i].get('toUser').get('avatar').thumbnailURL(100, 200) %><% }else{ %>/i/default_avatar.png<% } %>" class="am-comment-avatar" /></span>
            <span class="am-show-sm-only am-fl am-padding-left-xs"><% if(results[i].get('toUser')){ %><%= results[i].get('toUser').get('displayName') %><% }else{ %> - <% } %></span>
            <span class="am-show-sm-only am-fr"><font><%= moment(results[i].createdAt).zone(-8).format('YYYY-MM-DD HH:mm:ss') %></font></span>
          </div>
          <div class="am-u-md-2 am-hide-sm-only" ><% if(results[i].get('toUser')){ %><%= results[i].get('toUser').get('displayName') %><% }else{ %> - <% } %><br/><font><%= moment(results[i].createdAt).zone(-8).format('YYYY-MM-DD HH:mm:ss') %></font></div>
          <div class="am-u-sm-12 am-u-md-9">
            by <% if(results[i].get('type')=="image" && results[i].get('image')){ %><a href="/image/detail?id=<%= results[i].get('image').id %>"><%= results[i].get('image').get('name') %></a><% }else if(results[i].get('type')=="trip" && results[i].get('trip')){ %><a href="/trip/detail?id=<%= results[i].get('trip').id %>"><%= results[i].get('trip').get('title') %></a><% }else if(results[i].get('type')=="new" &&  results[i].get('new')){ %><a href="/new/detail?id=<%= results[i].get('new').id %>"><%= results[i].get('new').get('title') %></a><% } %><br/><%= results[i].get('content') %>
          </div>
          <div class="btnBar"><a href="javascript:del('<%= results[i].id %>')" title="Delete the comment"><i class="am-icon-trash"></i></a></div>
        </li>
        <% } %>
      <% }else{ %>
        <% for(var i=0;i<results.length;i++){ %>
        <li class="am-comment am-g">
          <div class="am-u-sm-12 am-u-md-1 am-padding-xs">
            <span class="am-fl"><img src="<% if(results[i].get('fromUser') && results[i].get('fromUser').get('avatar')){ %><%= results[i].get('fromUser').get('avatar').thumbnailURL(100, 200) %><% }else{ %>/i/default_avatar.png<% } %>" class="am-comment-avatar" /></span>
            <span class="am-show-sm-only am-fl am-padding-left-xs"><% if(results[i].get('fromUser')){ %><%= results[i].get('fromUser').get('displayName') %><% }else{ %> - <% } %></span>
            <span class="am-show-sm-only am-fr"><font><%= moment(results[i].createdAt).zone(-8).format('YYYY-MM-DD HH:mm:ss') %></font></span>
          </div>
          <div class="am-u-md-2 am-hide-sm-only" ><% if(results[i].get('fromUser')){ %><%= results[i].get('fromUser').get('displayName') %><% }else{ %> - <% } %><br/><font><%= moment(results[i].createdAt).zone(-8).format('YYYY-MM-DD HH:mm:ss') %></font></div>
          <div class="am-u-sm-12 am-u-md-9">
            by <% if(results[i].get('type')=="image" && results[i].get('image')){ %><a href="/image/detail?id=<%= results[i].get('image').id %>"><%= results[i].get('image').get('name') %></a><% }else if(results[i].get('type')=="trip" && results[i].get('trip')){ %><a href="/trip/detail?id=<%= results[i].get('trip').id %>"><%= results[i].get('trip').get('title') %></a><% }else if(results[i].get('type')=="new" &&  results[i].get('new')){ %><a href="/new/detail?id=<%= results[i].get('new').id %>"><%= results[i].get('new').get('title') %></a><% } %><br/><%= results[i].get('content') %>
          </div>
          <div class="btnBar"><a href="javascript:del('<%= results[i].id %>')" title="Delete the comment"><i class="am-icon-trash"></i></a></div>
        </li>
        <% } %>
      <% } %>
    </ul>
  </div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {

});
</script>
